<script setup lang="ts">
import { ref } from "vue";
//import { invoke, appWindow} from "@tauri-apps/api/tauri";

import {invoke} from "@tauri-apps/api";
import {appWindow} from "@tauri-apps/api/window";

const config = ref({
  addres: 'vpn.tyousan.top',
  pwd: 'test',
  port: 443
});

const reslut = ref("");

appWindow.listen("state-update", async (event: any) => {
  reslut.value = JSON.stringify(event) + " \n" + reslut.value
});

function setConfig() {
  // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
  //greetMsg.value = await invoke("greet", { name: name.value });
  invoke("set_config", { 
    config: config.value
  }).then(_=>{reslut.value = "set_config OK \n" + reslut.value});
}

function startVpn() {
  invoke("start_vpn").then(_=>{reslut.value = "start_vpn OK \n" + reslut.value});
}

function stopVpn() {
  invoke("stop_vpn").then(_=>{reslut.value = "stop_vpn OK \n" + reslut.value});
}

</script>

<template>
  <input v-model="config.addres"/>
  <input v-model="config.port"/>
  <input v-model="config.pwd"/>
  <button @click="setConfig">配置VPN</button>
  <button @click="startVpn">开启VPN</button>
  <button @click="stopVpn">停止VPN</button>

  <textarea v-model="reslut" rows="20"/>
</template>
